import React, { ReactElement, useState } from 'react'
import { useHistory, IRouteComponentProps, Link } from 'umi';
import './home.less'
import { Layout, Menu, Breadcrumb, Popconfirm, message } from 'antd';
import {
    UserOutlined, LaptopOutlined, NotificationOutlined, MenuUnfoldOutlined, MenuFoldOutlined
} from '@ant-design/icons';
import logoSrc from '../../assets/images/logo.png'
const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;
interface Props {

}

export default function index({ children }: IRouteComponentProps): ReactElement {
    const [collapsed, setCollapsed] = useState(false)
    const toggle = () => {
        let collapseds: boolean = !collapsed
        setCollapsed(collapseds)
    };
    const history = useHistory()
    const confirm = () => {
        message.success('注销成功');
        localStorage.removeItem("userInfo")
        localStorage.removeItem("token")

        history.push("/login");

    }
    const cancel = () => {
        message.error('取消退出');
    }
    return (
        <Layout>
            <Header className="header" >
                <div className="logo">
                    <img src={logoSrc} alt="" />
                    <span>欢迎来到汽车之家！</span>
                </div>
                <div className="logout">
                    <span style={{ color: "white" }}>欢迎【】</span>
                    <Popconfirm
                        title="你确定要退出系统吗？"
                        onConfirm={confirm}
                        onCancel={cancel}
                        okText="Yes"
                        cancelText="No"
                    >
                        <a href="#!">注销</a>
                    </Popconfirm>
                </div>

            </Header>
            <Layout>
                <Sider width={200} className="site-layout-background">
                    <Menu
                        mode="inline"
                        defaultSelectedKeys={['1']}
                        defaultOpenKeys={['sub1']}
                        style={{ height: '100%', borderRight: 0 }}
                    >
                        <SubMenu key="sub1" icon={<UserOutlined />} title="系统主页">

                        </SubMenu>
                        <SubMenu key="sub2" icon={<LaptopOutlined />} title="系统管理">
                            <Menu.Item key="5">option5</Menu.Item>
                            <Menu.Item key="6">option6</Menu.Item>
                            <Menu.Item key="7">option7</Menu.Item>
                            <Menu.Item key="8">option8</Menu.Item>
                        </SubMenu>
                        <SubMenu key="sub3" icon={<NotificationOutlined />} title="系统监控">
                            <Menu.Item key="9">option9</Menu.Item>

                        </SubMenu>
                        <SubMenu key="sub4" icon={<NotificationOutlined />} title="任务调度">
                            <Menu.Item key="19">option9</Menu.Item>


                        </SubMenu>
                        <SubMenu key="sub5" icon={<NotificationOutlined />} title="服务项目">
                            <Menu.Item key="29">option9</Menu.Item>


                        </SubMenu>
                        <SubMenu key="sub6" icon={<NotificationOutlined />} title="商铺管理">
                            <Menu.Item key="39">
                                <Link to="/home/shop">门店管理</Link>
                            </Menu.Item>
                            <Menu.Item key="130">
                                <Link to="/home/charge">电站审核</Link>
                            </Menu.Item>
                            <Menu.Item key="131">
                                <Link to="/home/shopapply">商铺审核</Link>
                            </Menu.Item>

                        </SubMenu>
                        <SubMenu key="sub7" icon={<NotificationOutlined />} title="商品管理">
                            <Menu.Item key="123">
                                <Link to="/home/goodList">商品管理</Link>
                            </Menu.Item>
                            <Menu.Item key="124">
                                <Link to="/home/goodTypeList">商品类型管理</Link>
                            </Menu.Item>

                        </SubMenu>
                        <SubMenu key="sub8" icon={<NotificationOutlined />} title="评价管理">
                            <Menu.Item key="69">option9</Menu.Item>
                            <Menu.Item key="610">option10</Menu.Item>

                        </SubMenu>
                        <SubMenu key="sub9" icon={<NotificationOutlined />} title="订单管理">
                            <Menu.Item key="79">option9</Menu.Item>

                            <Menu.Item key="712">option12</Menu.Item>
                        </SubMenu>
                        <SubMenu key="sub10" icon={<NotificationOutlined />} title="优惠券管理">
                            <Menu.Item key="89">option9</Menu.Item>

                            <Menu.Item key="812">option12</Menu.Item>
                        </SubMenu>
                        <SubMenu key="sub11" icon={<NotificationOutlined />} title="消息管理">
                            <Menu.Item key="99">option9</Menu.Item>

                            <Menu.Item key="192">option12</Menu.Item>
                        </SubMenu>
                        <SubMenu key="sub12" icon={<NotificationOutlined />} title="营销管理">
                            <Menu.Item key="90">option9</Menu.Item>

                            <Menu.Item key="102">option12</Menu.Item>
                        </SubMenu>
                    </Menu>
                </Sider>
                <Layout style={{ padding: '0 24px 24px' }}>
                    <Breadcrumb style={{ margin: '16px 0' }}>
                        <Breadcrumb.Item>Home</Breadcrumb.Item>
                        <Breadcrumb.Item>List</Breadcrumb.Item>
                        <Breadcrumb.Item>App</Breadcrumb.Item>
                    </Breadcrumb>
                    <Content
                        className="site-layout-background"
                        style={{
                            padding: 36,
                            margin: 0,
                            minHeight: 400,
                        }}
                    >
                        {children}
                    </Content>
                </Layout>
            </Layout>
        </Layout>
    )
}


